<template>
    <div>
        <h1>我关注的问题</h1>
        <!--				循环这个东东就可以了-->
        <el-row class="art-item" v-for="article in ArticleList" :key="article.id">
            <el-card shadow="hover">
                <!--						标题-->
                <h5>
                    <router-link :to="{name:'article',params :{id :article.id}}"
                                 tag="span" class="art-title">{{article.title}}
                    </router-link>
                </h5>
                <el-row class="art-body">
                    <!--							问题的封面-->
                    <div class="side-img hidden-sm-and-down"><img class="art-banner" src="../assets/vue.jpg"></div>
                    <!--							问题详细描述-->
                    <div class="side-abstract">
                        <div class="art-abstract">
                            {{article.description}}
                        </div>
                        <div class="art-more">
                            <router-link to="/article" tag="span">
                                <el-button plain>{{$t('home.readMore')}}</el-button>
                            </router-link>
                            <div class="view"><i class="el-icon-view"></i>12414</div>
                        </div>
                    </div>
                </el-row>
            </el-card>
        </el-row>
    </div>
</template>

<script>
    import {getForkdQuestion} from "../api";
    import storage from "../model/storage";

    export default {
        name: "forkedquestion",
        created() {
            //从哪store中取出用户的信息
            this.user.uname = storage.get("username");
            this.user.uid = storage.get("uid")

            if(this.user.uid ==null){
                alert("请前登录");
                this.$router.push("/login")
            }else {
                getForkdQuestion(this.user.uid).then(result => {
                    console.log(result)
                    this.ArticleList=result.data.forkedQuestion
                })
            }

        },
        data(){
            return{
                //接收文章列表
                ArticleList:[],
                user: {
                    uid: '',
                    uname: ''
                }
            }
        }
    }
</script>

<style scoped>

    .nav a{
        margin-right: 20px;

    }
    .nav a:hover{
        color: #409EFF;
    }

    .art-item {
        position: relative;
    }

    img.tag {
        width: 16px;
        height: 16px;
    }

    .art-title {
        border-left: 3px solid #F56C6C;
        padding-left: 5px;
        cursor: pointer;
    }

    .art-title:hover {
        padding-left: 10px;
        color: #409EFF;
    }


    .art-body {
        display: flex;
        padding: 10px 0;
    }

    .side-img {
        height: 105px;
        width: 190px;
        overflow: hidden;
        margin-right: 10px;
    }

    img.art-banner {
        width: 100%;
        height: 100%;
        transition: all 0.6s;
    }

    img.art-banner:hover {
        transform: scale(1.4);
    }

    .side-abstract {
        flex: 1;
        display: flex;
        flex-direction: column;
    }

    .art-abstract {
        flex: 1;
        color: #aaa;
    }

    .art-more {
        height: 40px;
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
    }

    .art-more .view {
        color: #aaa;
    }
    h5{
        font-size: 18px;
    }

</style>
